<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CMS首页</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath }/resource/css/bootstrap.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resource/css/index.css">
</head>
<body>

	<!-- 定义一个大的模块 -->
	<div class="container">
		<!-- 图片(头) -->
		<div>
			<a href="${pageContext.request.contextPath }/"> <img alt="" src="${pageContext.request.contextPath }/resource/pic/logo-admin.jpg"
				height="50" width="100"></a>
			<hr>
		</div>

		<!-- 输入框（form表单；中间部分） -->
		<div class="row">
			<!-- form表单 -->
			<div class="col-md-6">
				<form:form action="${pageContext.request.contextPath }/user/register" method="post"
					modelAttribute="user" id="regForm">
					<!-- 用户名 -->
					<div class="form-group">
						<label for="username">用户名：</label>
						<form:input path="username" class="form-control" id="username" />
						<form:errors path="username" cssStyle="color:red"></form:errors>
						<span id="usernameMsg" style="color: red"></span>
					</div>
					<!-- 密码 -->
					<div class="form-group">
						<label for="password">密码：</label>
						<form:input path="password" class="form-control" id="password" />
						<form:errors path="password" cssStyle="color:red"></form:errors>
					</div>
					<!-- 密码确认 -->
					<div class="form-group">
						<label for="repassword">再次输入密码：</label> <input type="text"
							class="form-control" id="repassword" name="repassword" /> <span
							id="repasswordMsg" style="color: red"></span>
					</div>

					<!-- 获取验证码 -->
					<div class="form-group">
						<label for="authCode">请输入验证码：</label> <input type="text"
							class="form-control" placeholder="请输入图形验证码" id="authCode"
							name="authCode" /> <span><canvas id="canvas" width="160"
								height="45"></canvas> <input class="btn btn-primary"
							onclick="changeImg()" type="button"
							value="${VERIFY==null?'获取':'重新获取' }" /> <span id="authCodeMsg"
							style="color: red"></span>
					</div>


					<!-- 昵称 -->
					<div class="form-group">
						<label for="nickname">昵称：</label>
						<form:input path="nickname" class="form-control" id="nickname" />
						<form:errors path="nickname" cssStyle="color:red"></form:errors>
					</div>
					<!-- 生日；date类型 -->
					<div class="form-group">
						<label for="birthday">生日：</label>
						<form:input path="birthday" type="date" class="form-control"
							id="birthday" />
						<form:errors path="birthday" cssStyle="color:red"></form:errors>
					</div>
					<!-- 性别 -->
					<div class="form-group">
						<label for="gender">性别：</label>
						<div class="form-check  form-check-inline">

							<form:radiobutton path="gender" class="form-check-input"
								id="inlineRadio1" value="0" />
							<label class="form-check-label" for="inlineRadio1">女</label>
						</div>
						<div class="form-check  form-check-inline">

							<form:radiobutton path="gender" class="form-check-input"
								id="inlineRadio2" value="1" />
							<label class="form-check-label" for="inlineRadio2">男</label>
						</div>
					</div>
					<!-- 操作按鈕 -->
					<div class="form-group">
						<input type="reset" value="重置" class="btn btn-primary"> <input
							type="button" onclick="sub()" value="注册" class="btn btn-primary">
						</button>
					</div>
				</form:form>
			</div>
			<!-- 加图片，美化页面；（右侧）  -->
			<div class="col-md-6">
				<img alt="" src="${pageContext.request.contextPath }/resource/pic/bg-reg.jpg" height="300">
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	
	// 注册功能
	function sub() {
		alert(111);
        // 使用ajax校验用户是否已存在(js validate)
        $.post(
             "${pageContext.request.contextPath }/user/checkUser",
             {username:$("#username").val()},
             function(result) {
                   if(result){
                        // 用户已存在，提示错误信息
                        $("#usernameMsg").html("该用户名已存在！");
                   }else{
                        // 不存在，进行提交操作
                        $("#usernameMsg").html("");
                        // 校验再次输入密码是否正确
                        var password = $("#password").val();
                        var repassword =  $("#repassword").val();
                        if(password != repassword){
                              // 密码不相等提示
                              $("#repasswordMsg").html("两次输入的密码不一致！");
                        }else {
                              // 提交
                              $("#repasswordMsg").html("");
                              $("#regForm").submit();
                        }
                   }
                   
             }
        )
	}
	
	
	// 获取验证码
	// 获取验证码
     drawPic();
     function changeImg() {
           var timestamp = (new Date()).valueOf();
           location = "${pageContext.request.contextPath }/user/getVerify?time="+timestamp
     }

      // 验证码图片绘制
      /**1、生成一个随机数**/
      function randomNum(min,max){
         return Math.floor( Math.random()*(max-min)+min);
      }
      /**2、生成一个随机色**/
      function randomColor(min,max){
         var r = randomNum(min,max);
         var g = randomNum(min,max);
         var b = randomNum(min,max);
         return "rgb("+r+","+g+","+b+")";
      }
      
       /**3、绘制验证码图片**/
      function drawPic(){
        var canvas=document.getElementById("canvas");
        var width=canvas.width;
        var height=canvas.height;
        var ctx = canvas.getContext('2d');
        ctx.textBaseline = 'bottom';
      
        /**3.1绘制背景色**/
        ctx.fillStyle = randomColor(180,240); //颜色若太深可能导致看不清
        ctx.fillRect(0,0,width,height);
        /**3.2绘制文字**/
         // var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
        var str= "${VERIFY}";
        console.log("==============="+str);
        for(var i=0; i<str.length; i++){
          var txt = str[i];
          console.log("==============="+txt);
          ctx.fillStyle = randomColor(50,160);  //随机生成字体颜色
          ctx.font = randomNum(15,40)+'px SimHei'; //随机生成字体大小
          var x = 10+i*25;
          var y = randomNum(25,45);
          var deg = randomNum(-45, 45);
          //修改坐标原点和旋转角度
          ctx.translate(x,y);
          ctx.rotate(deg*Math.PI/180);
          ctx.fillText(txt, 0,0);
          //恢复坐标原点和旋转角度
          ctx.rotate(-deg*Math.PI/180);
          ctx.translate(-x,-y);
        }
        /**3.3绘制干扰线**/
        for(var i=0; i<8; i++){
          ctx.strokeStyle = randomColor(40,180);
          ctx.beginPath();
          ctx.moveTo( randomNum(0,width), randomNum(0,height) );
          ctx.lineTo( randomNum(0,width), randomNum(0,height) );
          ctx.stroke();
        }
        /**3.4绘制干扰点**/
        for(var i=0; i<100; i++){
          ctx.fillStyle = randomColor(0,255);
          ctx.beginPath();
          ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0,  2*Math.PI);
          ctx.fill();
        }
      }
	
</script>

</html>